<template>
	<view class="content padding-top-30">
		<view class="" style="background: #FFFFFF;">
			<view @click="open" class="display-flex space-between align-items font-size-26" style="padding: 20rpx;">
				<view class="">
					省市区：
				</view>
				<view class="file-1 text-right color-666">
					{{city.name || '请选择省市区'}}
				</view>
			</view>
			<view class="" style="border-bottom: 1rpx solid #F5F5F5;"></view>
			<view class="display-flex space-between font-size-26" style="padding: 20rpx;">
				<view class="">
					详细地址：
				</view>
				<view class="file-1 textarea display-flex center align-items color-666">
					<textarea v-model="address" style="width: 95%;height: 90%;" name="" id="" cols="30"
						rows="10"></textarea>
				</view>
			</view>
			<view class="" style="border-bottom: 1rpx solid #F5F5F5;"></view>
			<view class="display-flex space-between align-items font-size-26" style="padding: 20rpx;">
				<view class="">
					营业执照：
				</view>
				<view class="file-1 text-right color-666">
					<view v-for="item,index in imageList" :key="index" class="file-1">
						<view style="width: 100%;height: 262rpx;border-radius: 20rpx;margin-bottom: 20rpx;"
							class="position-relative">
							<image :src="item.fullurl"
								style="width: 100%;height: 262rpx;border-radius: 20rpx;margin-bottom: 20rpx;"
								mode="aspectFill"></image>
							<view @click="delimage(index)" class="position-absolute border-radius"
								style="background: #FFFFFF; top: -14rpx;right:-14rpx;">
								<uv-icon name="close-circle-fill" color="red" size="28"></uv-icon>
							</view>
						</view>
					</view>
					<view v-if="!imageList.length" @click="chooseImage" style="height: 300rpx;"
						class="display-flex flex-direction-column textarea center align-items">
						<image src="/static/sc.png" style="width: 122rpx;height: 122rpx;" mode=""></image>
						<view class="font-size-26 margin-top-10 color-999">
							上传执照
						</view>
					</view>
				</view>
			</view>
			<view class="" style="border-bottom: 1rpx solid #F5F5F5;"></view>
			<view class="display-flex space-between align-items font-size-26" style="padding: 20rpx;">
				<view class="">
					执照编码：
				</view>
				<view class="file-1 text-right color-666">
					<input type="text" v-model="work_num" class="font-size-26" placeholder="请输入执照编码" />
				</view>
			</view>
		</view>
		<view class="display-flex margin-top-120 flex-direction-column center">
			<view @click="profile()" class="button text-center color-FFF font-size-26"
				style="padding: 25rpx 266rpx;width: 150rpx;">
				保存
			</view>
		</view>
		<cityPicker :column="column" :mask-close-able="maskCloseAble" @confirm="confirm" @cancel="cancel"
			:visible="visible" />
	</view>
</template>

<script setup>
	import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker'
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onReachBottom
	} from '@dcloudio/uni-app';
	import {
		nativeUI,
		navigateTo,
		navigateBack
	} from '@/utils/index.js';
	import * as api from '@/request/app.js'; // 引入api 方法
	import local from '@/utils/localStorage.js'; //引入本地存储方法
	const work_num = ref('')
	const address = ref('')
	const city = ref('')
	const visible = ref(false)
	const maskCloseAble = ref(true)
	const column = ref(3)
	const imageList = ref([])
	onLoad(function(option) {});
	onShow(function() {});
	async function profile() {
		if (!city.value.name) return uni.$uv.toast('请选择省市区')
		if (!address.value) return uni.$uv.toast('请输入详细地址')
		if (!imageList.value.length) return uni.$uv.toast('请上传营业执照')
		if (!work_num.value) return uni.$uv.toast('请输入执照编码')

		const {
			code,
			data
		} = await api.profile({
			province: city.value.s,
			city: city.value.c,
			district: city.value.q,
			address: address.value,
			city_address: city.value.name,
			work_image: imageList.value[0].fullurl,
			work_num: work_num.value,
		})
		if (code == 1) {
			getuserinfo()
		}
	}
	async function getuserinfo() {
		const {
			code,
			data
		} = await api.getuserinfo()
		if (code == 1) {
			local.set('userinfo', data)
			userinfo.value = data
		}
	}

	function delimage(index) {
		console.log(1);
		imageList.value.splice(index, 1)
	}

	function open() {
		visible.value = true
	}

	function confirm(val) {
		console.log(val)
		city.value = val
		visible.value = false
	}

	function cancel() {
		visible.value = false
	}
	/**
	 * 修改头像
	 */
	async function chooseImage() {
		const {
			errMsg,
			tempFilePaths,
			tempFiles
		} = await uni.chooseImage({
			count: 1, //默认9
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
		})
		console.log(tempFilePaths);
		if (errMsg == 'chooseImage:ok') {
			for (var i = 0; i < tempFilePaths.length; i++) {
				uploadFilePromise(tempFilePaths[i])
			}

		}
	}
	/**
	 * @param {Object} url上传  路径
	 * 上传头像
	 */
	async function uploadFilePromise(url) {
		const {
			code,
			data
		} = await api.uploadFilePromise(url)
		if (code == 1) {
			imageList.value.push(data)
			// userinfo.value.avatar = id
			// userinfo.value.avatar_url = path
		}
	}
	onReady(function() {});
	onReachBottom(function() {});
</script>

<style scoped lang="scss">
	.textarea {
		background: #F5F5F5;
		border-radius: 12rpx;
		height: 200rpx;
	}
</style>